<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link rel="stylesheet" href="/css/h5/information_detail/amazeui.min.css"/>
    <link rel="stylesheet" href="/css/h5/information_detail/wap.css"/>
    <title th:text="${drama.title}"></title>

    <style>
        .drama_img_list img{
            width: 100%;
        }
    </style>
</head>
<body style="background:#ececec">
<div class="pet_mian">
    <div class="pet_content">
        <div class="pet_content_block pet_hd_con">
            <article data-am-widget="paragraph" class="am-paragraph am-paragraph-default pet_content_article"
                     data-am-paragraph="{ tableScrollable: true, pureview: true }">
                <h1 class="pet_article_title" th:text="${drama.title}"></h1>
                <div class="pet_hd_con_head" style="margin:15px 0px;" th:if="${#strings.contains(drama.dramaUrl,'@@@@')}">
                    <img th:src="${#strings.substring(drama.dramaUrl,0,#strings.indexOf(drama.dramaUrl,'@@@@'))}" alt=""/>
                </div>

                <div class="pet_article_user_time pet_hd_con_map" th:text="${'剧名：'+drama.name}"></div>
                <div class="pet_article_user_time pet_hd_con_map" th:switch="${drama.theme}">
                    题材:
                    <span th:case="0" class="layui-show-md-inline-block">爱情</span>
                    <span th:case="1" class="layui-show-md-inline-block">悬疑</span>
                    <span th:case="2" class="layui-show-md-inline-block">古装</span>
                    <span th:case="3" class="layui-show-md-inline-block">犯罪</span>
                    <span th:case="4" class="layui-show-md-inline-block">战争</span>
                    <span th:case="5" class="layui-show-md-inline-block">动作</span>
                    <span th:case="6" class="layui-show-md-inline-block">恐怖</span>
                    <span th:case="7" class="layui-show-md-inline-block">科幻</span>
                    <span th:case="8" class="layui-show-md-inline-block">家庭</span>
                </div>
                <div class="pet_article_user_time pet_hd_con_map" th:text="${'集数：'+drama.chapter}"></div>
                <div class="pet_article_user_time pet_hd_con_map" th:text="${'出品公司：'+drama.commpany}"></div>
                <!-- <div class="pet_article_user_time pet_hd_con_map" th:text="${'制片人'+drama.commpany}">制片人：关小红</div>-->
                <div class="pet_article_user_time pet_hd_con_map" th:text="${'导演：'+drama.director}"></div>

                <div class="pet_article_user_time pet_hd_con_map">
                    演员：<a  th:each="person:${personList}" th:href="'/api/detail/actor/'+${person.pId}" th:attr="pId=${person.pId}" th:text="${person.pName}+'  '"></a>
                </div>
                <div class="pet_article_user_time pet_hd_con_map" th:text="${'备注：'+drama.remark}"></div>
                <!--<div class="pet_article_user_time pet_hd_con_map">联系人：周友超</div>-->
                <div class="pet_hd_con_gp_list_nr">
                    <div class="pet_hd_con_gp_list_nr_title">剧相关信息</div>
                    <div class="pet_hd_con_gp_list_nr_tag">剧情简介</div>
                    <p th:text="${drama.description}"></p>
                    <div class="pet_hd_con_gp_list_nr_tag" style="margin-bottom: 15px;">相关剧照</div>
                    <div class="drama_img_list" th:if="${not #strings.isEmpty(drama.dramaUrl)}"
                         th:each="imgUrl:${#strings.arraySplit(drama.dramaUrl,'@@@@')}">
                        <img style="margin-bottom: 10px;" class="cover-img" th:src="${imgUrl}" alt="剧照"/>
                    </div>

                </div>
            </article>
        </div>
        <div class="pet_article_footer_info">Copyright(c)2017 ZhiYu All Rights Reserved</div>
    </div>
</div>
<script src="/js/common/jquery-2.1.1.min.js"></script>
<script src="/js/h5/amazeui.min.js"></script>
<script>
    $(function () {
        // 动态计算新闻列表文字样式
        auto_resize();
        $(window).resize(function () {
            auto_resize();
        });
        $('.am-list-thumb img').load(function () {
            auto_resize();
        });
        $('.pet_article_like li:last-child').css('border', 'none');
        function auto_resize() {
            $('.pet_list_one_nr').height($('.pet_list_one_img').height());
            // alert($('.pet_list_one_nr').height());
        }

        $('.pet_article_user').on('click', function () {
            if ($('.pet_article_user_info_tab').hasClass('pet_article_user_info_tab_show')) {
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_show').addClass('pet_article_user_info_tab_cloes');
            } else {
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_cloes').addClass('pet_article_user_info_tab_show');
            }
        });

        $('.pet_head_gd_ico').on('click', function () {
            $('.pet_more_list').addClass('pet_more_list_show');
        });
        $('.pet_more_close').on('click', function () {
            $('.pet_more_list').removeClass('pet_more_list_show');
        });
    });

</script>
</body>
</html>